<template>
	<view class="vux-1px-b m-form-item-c">
		<view class="required" v-if="required">*</view>
		<view
			class="label"
			:style="[
				{
					width: labelWidth
				}
			]"
		>
			{{ label }}
		</view>
		<view class="slot-container"><slot></slot></view>
	</view>
</template>

<script>
export default {
	name: 'm-form-item',
	props: {
		label: {
			type: String,
			default: 'label'
		},
		labelWidth: {
			type: String,
			default: '150rpx'
		},
		required: {
			type: Boolean,
			default: false
		}
	}
};
</script>

<style lang="scss" scoped>
.m-form-item-c {
	display: flex;
	// align-items: center;
	padding: 0 30rpx;
	padding-left: 34rpx;
	min-height: 100rpx;
	position: relative;

	.required {
		position: absolute;
		font-size: 30rpx;
		color: red;
		left: 18rpx;
		top: 30rpx;
	}
	/* #ifdef H5 */
	&:last-child {
		&::after {
			border: none;
		}
	}
	/* #endif */

	.label {
		line-height: 1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-top: 40rpx;
	}
	.slot-container {
		flex: 1;
		height: 100%;
	}
}
</style>
